<template>
  <div class="moralityAssessment">
    <div class="common_showBox bx">
      <div class="common_searchBox br mb14">
        <!-- <div class="searchBox longBox bx">
          <img src="static/images/search.png" alt="" srcset="">
          <input type="text" placeholder="搜索" v-model="searchKey">
        </div> -->
        <!-- <span class="ml30">班级：</span>
        <div class="chooseBox bx down w180 hideInput">

          <div class="maskIpnut">{{chooseClassName}}</div>
          <selectMk :liDataGet="classData" @change="change" dataType='class_name' v-if="classData.length>0"></selectMk>
        </div> -->
        <span class="ml30">年级：</span>
        <div class="chooseBox bx down w180 hideInput">

          <div class="maskIpnut">{{chooseYearName}}</div>
          <selectMk :liDataGet="yearData" @change="change" dataType='year_name' v-if="yearData.length>0"></selectMk>
        </div>
        <div class="chooseBox  paddingInput date">

          <el-date-picker type="date" v-model="queryDate" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <el-button type="primary" class="queryBtn" :loading="queryBtnFlag" @click="queryBtn" :disabled="disabledQuery">查询</el-button>
      </div>
      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">考评信息</div>
          <div class="common_title_right">
            <!-- <div class="common_title_btn " @click="newLayer()">新建</div> -->

            <!-- nowDate -->
            <el-button type="primary" class="common_title_btn nomorl " @click="openEditor()" v-if="!editorFlag&&nowDate" :disabled="nowDate!=sureDate">编辑</el-button>
            <el-button type="primary" class="common_title_btn  " @click="cancelData()" v-if="editorFlag" :loading="pushDataFlag">取消</el-button>
            <el-button type="primary" class="common_title_btn  " @click="pushData()" v-if="editorFlag" :loading="pushDataFlag">完成</el-button>

            <div class="common_title_btn" @click="openLayer()">设置</div>
            <!-- <div class="common_title_btn" @click="deletBtn()">模版下载</div> -->
            <!-- <div class="common_title_btn" @click="setTeacher()">批量导入</div> -->
          </div>
        </div>
        <div class="common_form bx" ref="common_form">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange"
            @cell-click="changeText&&false" v-if="tableData.length>0">
            <el-table-column prop="class_name" label="班级" :width="classWidth"></el-table-column>
            <el-table-column :label="item.name" :width="moralityWidth" v-for="(item, index) in tableData3" :key="index">
              <el-table-column :prop="list.name" :label="list.name" :width="minMoralityWidth" v-for="(list, listIndex) in item.list" :key="listIndex">

              </el-table-column>
            </el-table-column>

          </el-table>
          <h2 v-if="tableData.length==0" class="noData">暂无数据</h2>

          <!-- <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()" class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()" class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="common_alertBox addSet" v-if="addSet">
      <div class="common_alertBox_header">
        <span>设置</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_chooseLi" v-for="(item, index) in tableData1">
          <div class="common_alertBox_big">
            <i class="openBtn clickBtn" v-show="!item.closeFlag" @click="closeFlagChange(index)"></i>
            <i class="closeBtn clickBtn" v-show="item.closeFlag" @click="closeFlagChange(index)"></i>
            大项：
            <input type="text" v-model="item.name">
            <i class="addBtn clickBtn" @click="addBigBtn" v-if="index==tableData1.length-1"></i>
            <i class="deleteBtn clickBtn" @click="deleteBigBtn(index)"></i>
          </div>
          <div class="common_alertBox_small" v-show="item.closeFlag">
            <div class="common_alertBox_small_li" v-for="(list, listIndex) in item.list">
              小项:
              <input type="text" v-model="list.name"> 总分：
              <input type="number" min="0" v-model="list.score" class="scopeInput" :class="listIndex!=(item.list.length-1)?'mr58':''">
              <i class="addBtn clickBtn" @click="addSmallBtn(index)" v-if="listIndex==item.list.length-1"></i>
              <i class="deleteBtn clickBtn" @click="deleteSmallBtn(index,listIndex)"></i>
            </div>

          </div>

        </div>

      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addSetSureBtn()">保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addSetSureFlag" @click="addSetSureBtn">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
    <div class="common_alertBox addSet" v-if="addNew">
      <div class="common_alertBox_header">
        <span>新增</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span>班级：</span>
            <div class="chooseBox bx down  hideInput">

              <div class="maskIpnut">{{chooseClassName}}</div>
              <selectMk :liDataGet="classData" @change="change" dataType='class_name' v-if="classData.length>0"></selectMk>
            </div>

          </div>

          <div class="common_alertBox_li_right">

          </div>
        </div>

        <div class="common_alertBox_chooseLi" v-for="(item, index) in newArrData">
          <div class="common_alertBox_big">
            大项：
            <input type="text" v-model="item.name" disabled>
          </div>
          <div class="common_alertBox_small">
            <div class="common_alertBox_small_li" v-for="(list, listIndex) in item.list">
              小项:
              <input type="text" v-model="list.name" class="scopeInput" disabled> 得分：
              <input type="number" min="0" v-model="list.score" class="scopeInput">备注:
              <input type="text" v-model="list.remark">
            </div>

          </div>

        </div>

      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addSetSureBtn()">保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addSetSureFlag" @click="newClickBtn">新建</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
    <div class="common_alertBox setTeacher" v-if="setTeacherFlag">
      <div class="common_alertBox_header">
        <span>设置任课老师</span>
      </div>
      <div class="common_alertBox_content">

      </div>
      <div class="common_alertBox_footer">
        <div class="common_alertBox_footer_btn sureBtn" @click="setTeacherSureBtn()">保存</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn()">取消</div>
      </div>
    </div>

  </div>
  </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        classData: [],
        yearData: [],
        chooseClassId: '',
        chooseClassName: '',
        chooseYearName: '',
        chooseYearId: '',
        queryDate: '',
        nowDate: '',
        sureDate: '',
        searchKey: '',
        disabledQuery: false,
        classWidth: '',
        moralityWidth: '',
        minMoralityWidth: '',
        name_idArr: [],
        editorFlag: false,
        queryBtnFlag: false,
        addSetSureFlag: false,
        pushDataFlag: false,
        addNew: false,
        addSet: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        page: 1, //初始页数
        pagesize: 8, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        tableData3: [{"name":"纪律","score":51,"list":[{"id":5,"name":"放学排队","score":51,"order":1}],"closeFlag":true},{"name":"卫生","score":52,"list":[{"id":10,"name":"个人卫生","score":52,"order":1}],"closeFlag":true},{"name":"心态","score":53,"list":[{"id":12,"name":"身心健康","score":53,"order":1}],"closeFlag":true}], //接收数据
        tableData1: [], //接收数据
        newArrData: [],
        tableData: [{"id":7,"class_name":"4班","start_year":2018,"type":3,"list":[{"option_id":5,"score":51,"remark":""}]},{"id":9,"class_name":"3班","start_year":2018,"type":3,"list":[]},{"id":13,"class_name":"1班","start_year":2018,"type":3,"list":[]},{"id":14,"class_name":"50班","start_year":2018,"type":3,"list":[]}],
        studentList: [],
        chooseYearType: '',
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件
          //console.log(index, row);
        },
        handleDelete(index, row) { //删除事件
          //console.log(index, row);
        }
      }
    },
    mounted() {

      let width = this.$refs.common_form.getBoundingClientRect().width;
      this.classWidth = Math.floor(width * 0.094);
      this.moralityWidth = Math.floor(width * 0.9);
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // //console.log(e)
        console.log(e)
        switch (e.dataType) {
          case 'class_name':
            this.chooseClassName = e.val;
            this.chooseClassId = e.id;
            break;
          case 'year_name':
            this.chooseYearName = e.val;
            this.chooseYearId = e.year;
            this.chooseYearType = e.type;
            break;

        }
      },
      closeFlagChange(index) {
        this.tableData1[index].closeFlag = !this.tableData1[index].closeFlag;

        //开关阀门状态更变
      },
      changeText(row, column, cell, event) {
        // //console.log(row, column, cell, event)

        // //console.log('colSpan',column.colSpan)
        // console.log('level',column.level)
        // console.log('rowSpan',column.rowSpan)

        //console.log(column.property)
        //console.log(row[column.property])


      },
      queryBtn() {
        //点击查询
        this.queryBtnFlag = true;
        this.tableData3 = [];
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);

      },
      deleteSmallBtn(index, listIndex) {

        this.tableData1[index].list.splice(listIndex, listIndex)
        if (listIndex == 0 && this.tableData1[index].list.length == 1) {

        }
      },
      deleteBigBtn(index) {

        this.tableData1.splice(index, index)
        if (index == 0 && this.tableData1.length == 1) {
          //console.log('不能为空')
          this.$message({ //成功返回
            message: '最后一项不可删除！',
            type: 'error',
            duration: 888
          });
        } else if (index == 0 && this.tableData1.length != 1) {
          //console.log(1)
          this.tableData1.shift()
        }
      },
      addBigBtn() {
        this.tableData1.push({
          list: [{
            id: 0,
            name: '',
            score: ''
          }],
          name: '',
          closeFlag: true,
          id: 0
        })

        //console.log(this.tableData3)
      },
      addSmallBtn(index) {
        this.tableData1[index].list.push({
          id: 0,
          name: '',
          score: ''
        })
      },
      openLayer() { //显示添加班级弹窗
        this.addSet = true;
        this.tableData1 = JSON.parse(JSON.stringify(this.tableData3));
        $('.mask').show();
      },
      newLayer() {
        this.addNew = true;
        let arr = JSON.stringify(this.tableData3);
        arr = JSON.parse(arr);
        arr.map((e, i) => {
          e.list.map((list, listIndex) => {
            list.remark = '';
          })
        })
        this.newArrData = arr;
        $('.mask').show();
      },
      openEditor() {
        if (this.tableData.length > 0) {
          let scoreTotal = this.tableData3;
          this.editorFlag = true;
          var reg = /^[0-9]*$/;
          let name_idArr = this.name_idArr;
          let len = name_idArr.length;
          let j = 0;
          $('tbody .cell').each(function (i) {
            if (reg.test($(this).html())) {

              $(this).parent().append('<input value="' + $(this).html() +
                '" type="text" min="0" class="tableInput" data-id=' +
                name_idArr[(j) % len].id + ' placeholder=总分:' + scoreTotal[(j) % len].score + ' data-maxScore="' +
                scoreTotal[(j) % len].score + '">');
              j++;
            } else {
              //班级汉字
            }
          })
          $('.tableInput').keyup(function (e) { //数字验证
            let maxScore = $(this).attr('data-maxScore') - 0;
            let value = $(this).val().replace(/[^0-9-]+/, '') - 0;
            if (value < 0) {
              $(this).val(0);
            } else {
              if (value > maxScore) {
                $(this).val(maxScore);
              } else {

              }
            }
          })
          this.disabledQuery = true;
        } else {
          this.$message({ //成功返回
            message: '没有数据,无法编辑！',
            type: 'warning',
            duration: 888
          });
        }






      },
      newClickBtn() {
        let _this = this;
        //console.log(_this.tableData3);
        let pushObj = {
          class_id: _this.chooseClassId,
          list: []
        }
        _this.newArrData.map((e, i) => {

          e.list.map((eList, listIndex) => {

            pushObj.list.push({
              "option_id": eList.id,
              "score": eList.score,
              "remark": eList.remark
            })
          })
        })


      },
      cancelData() {
        this.cancelBtn();
        $('.tableInput').remove();
        this.editorFlag = false;
      },
      pushData() {
        let _this = this;
        this.editorFlag = false;
        this.pushDataFlag = true;
        let arr = [];

        let len = this.name_idArr.length;

        this.tableData.map((e, i) => {
          arr.push({
            class_id: e.id,
            list: []
          })
        })

        let arrIndex = 0
        $('.tableInput').each(function (i) {

          if (arr[arrIndex]) {
            arr[arrIndex].list.push({
              "option_id": $(this).attr('data-id'), // 小项id
              "score": $(this).val(), // 单项得分
              "remark": "" // 备注
            })
            if (i % len == (len - 1)) {
              arrIndex++;
            }
          }



        })



      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        var page = page;
        var pagesize = pagesize;
        let _this = this;
        let grade = this.chooseYearId
        let class_type = this.chooseYearType;
        // return


      },
      // nextPage() { //下一页
      //   var page = this.page + 1;
      //   var pagesize = this.pagesize;
      //   this.getData(page, pagesize)
      // },
      // lastPage() { //上一页
      //   var page = this.page - 1;
      //   var pagesize = this.pagesize;
      //   this.getData(page, pagesize);
      // },
      // minPage() { //首页
      //   var page = 1;
      //   var pagesize = this.pagesize;
      //   this.getData(page, pagesize);
      // },
      // maxPage() { //尾页
      //   var page = this.totalPage;
      //   var pagesize = this.pagesize;
      //   this.getData(page, pagesize);
      // },
      cancelBtn() { //取消按钮
        this.addSet = false;
        this.addNew = false;
        this.setTeacherFlag = false;
        this.addSetSureFlag = false;
        this.pushDataFlag = false;
        this.disabledQuery = false;
        $('.mask').hide();
      },
      setTeacherSureBtn() { //设置教师确定按钮
        alert('保存成功')
        this.setTeacherFlag = false;
        $('.mask').hide();
      },
      trim(str) {
        return str.replace(/(^\s*)|(\s*$)/g, "");
      },
      addSetSureBtn() { //添加班级确定按钮
        let arr = JSON.parse(JSON.stringify(this.tableData1));
        // let arr=[{"name":"卫生","score":300,"id":1,"list":[{"id":2,"name":"教室","score":100,"order":1},{"id":3,"name":"个人","score":100,"order":2},{"id":4,"name":"公共","score":100,"order":3}]},{"name":"纪律","score":300,"id":5,"list":[{"id":6,"name":"上课","score":100,"order":1},{"id":7,"name":"自习","score":100,"order":2},{"id":8,"name":"放学排队","score":100,"order":3}]},{"id":9,"name":"考勤","score":0,"list":[]},{"list":[],"name":"1121","id":0}]
        let flag1 = false;
        let flag2 = false;
        let flag3 = false;
        let _this = this;

        arr.map((e, index) => { //检测非空
          if (_this.trim(e.name) == '') {
            flag1 = true;
            return
          }
          e.list.map((eList, listIndex) => {
            if (_this.trim(eList.name) == '') {
              flag2 = true;
              return
            }
            if (_this.trim(eList.score + '') == '') {
              flag3 = true;
            }
          })
        })

        if (flag1 || flag2 || flag3) { //如果有非空
          if (flag1) {
            _this.$message({
              message: '大项内容不能为空!',
              type: 'warning'
            });
            return
          }
          if (flag2) {
            _this.$message({
              message: '小项内容不能为空!',
              type: 'warning'
            });
            return
          }
          if (flag3) {
            _this.$message({
              message: '总分不能为空!',
              type: 'warning'
            });
            return
          }


        } else {
          let arr = JSON.parse(JSON.stringify(this.tableData1))
          _this.addSetSureFlag = true;
          let postData = JSON.stringify(arr);




        }

      },
      getClassData() {
        var _this = this;



      },
      chooseType(e) {
        switch (e) {
          case '1':
            return '小学';
            break;
          case '2':
            return '初中';
            break;
          case '3':
            return '高中';
            break;
        }
      },
      getYearData() {
        var _this = this;




      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        return currentdate;
      }

    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }


  .common_alertBox.addClass {
    width: 833px;
    height: 376px;
  }

  /* ::-webkit-scrollbar {
          隐藏滚轮
          display: none;
      } */

  .common_alertBox.addSet {
    width: 818px;
    /* height: 710px; */
  }

  .common_alertBox.setTeacher .common_alertBox_content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .common_alertBox.setTeacher .common_alertBox_content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d8d8d8;
  }

  .common_alertBox.setTeacher .common_alertBox_content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #fff;
  }

  .common_alertBox.setTeacher .common_alertBox_content {
    height: 500px;
    overflow-y: scroll;
  }

  .common_alertBox.addSet .common_alertBox_content {
    padding: 0 96px;
    max-height: 500px;
    overflow: auto;
  }

  .common_alertBox.setTeacher .common_alertBox_li {
    height: 60px;
    border-bottom: 2px solid #ececec;
    box-sizing: border-box;

  }

  .common_alertBox.setTeacher .common_alertBox_li_right,
  .common_alertBox.setTeacher .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }


  .common_alertBox.setTeacher .chooseBox span {
    margin-left: 26px;

  }

  .common_alertBox.setTeacher .select {
    text-align: left;
  }


  .common_alertBox_li {
    width: 100%;

  }

  .common_alertBox_big {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;


  }

  .common_alertBox_small_li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox_footer {
    padding: 35px 275px;
    height: 35px;
    display: flex;
    justify-content: space-between;
  }

  .message-box__Btn {
    width: 118px;
    height: 35px;
    line-height: 35px;
    border-radius: 18px;
    color: #fff;
    background: #1985ce;
  }

  .message-box__sureBtn .pages_form_btnBox {
    font-size: 18px;
    color: #757575;
  }

  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    padding-top: 98px;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .moralityAssessment {
    height: 100%;
  }

  .clickBtn {
    width: 26px;
    height: 26px;
    display: block;
    margin-right: 16px;
  }

  .common_alertBox_chooseLi input {
    width: 212px;
    height: 36px;
    border-radius: 18px;
    border: none;
    border: 1px solid #e2e2e2;
    outline: none;
    padding: 0 24px;
    box-sizing: border-box;
    margin-right: 16px;
  }

  .common_alertBox_chooseLi input.scopeInput {
    width: 100px;

  }

  .common_alertBox_chooseLi input.scopeInput.mr58 {
    margin-right: 58px;
  }

  .openBtn {
    background: url('../../../../static/images/jia.png')
  }

  .closeBtn {
    background: url('../../../../static/images/jian.png')
  }

  .addBtn {
    background: url('../../../../static/images/addbtn.png')
  }

  .deleteBtn {
    background: url('../../../../static/images/delete.png')
  }

  .common_form {
    padding: 0;
  }


  .common_alertBox_header {
    margin: 0;
  }

  .chooseBox {
    margin: 10px 46px 10px 0;
    width: 212px;
  }

  /* 更正 */

</style>
